<template>
  <div>
    <div v-if="loadingAnnouncement" class="loading-text">加载中...</div>
    <MarkdownWithHighlight v-else :source="announcement.text" />
  </div>
</template>

<script>
import { getSiteInfo, updateSiteInfo } from '@/api/settings';
import { Message } from 'element-ui';
import MarkdownWithHighlight from '@/components/MarkdownWithHighlight.vue'; // 修正 Markdown 组件的导入

export default {
  data() {
    return {
      announcement: {
        text: ''
      },
      loadingAnnouncement: false
    };
  },
  components: {
    MarkdownWithHighlight
  },
  mounted() {
    this.fetchAnnouncement();
  },
  methods: {
    async fetchAnnouncement() {
      this.loadingAnnouncement = true; // Set loading to true before making the request
      try {
        const response = await getSiteInfo(); // Fetching the announcement info
        console.log(response); // Check the response structure
        if (response && response.data && response.data.info) {
          this.announcement.text = response.data.info; // Fill the content into the model
        } else {
          this.announcement.text = ''; // Fallback in case no content is returned
        }
      } catch (error) {
        Message({
          message: '无法获取公告!',
          type: 'error',
          duration: 5 * 1000
        });
      } finally {
        this.loadingAnnouncement = false; // Set loading to false after the fetch is complete
      }
    },
  }
};
</script>

<style>
.loading-text {
  text-align: center;
  font-size: 14px;
  color: #666;
}
</style>
